<template>
  <view class="app-container ver-layout">
    <!-- 上传照片   -->
    <view class="photo-layout hor-layout-center" @click="uploadImage">
      <view class="photo-view ver-layout-center-all">
        <u-icon v-if="!form.image" name="camera" color="#999999" size="50"></u-icon>
        <image v-else :src="form.image" class="photo-image"/>
      </view>
      <view class="upload-view">上传照片</view>
    </view>
    <!-- 其他信息   -->
    <u-form :model="form" ref="uForm" label-width="107px" :label-style="formLabel">
      <u-form-item label="学员姓名">
        <u-input v-model="form.name" placeholder="请输入学员姓名" :maxlength="10"/>
      </u-form-item>
      <u-form-item label="性 别">
        <u-radio-group v-model="form.sex">
          <u-radio v-for="(item, index) in radioList" :key="index" :name="item.value" active-color="#42B4AB">
            {{ item.name }}
          </u-radio>
        </u-radio-group>
      </u-form-item>
      <u-form-item label="年 龄">
        <u-input v-model="form.age" type="number" placeholder="请输入年龄" :maxlength="18"/>
      </u-form-item>
      <u-form-item label="联系电话">
        <u-input v-model="form.username" type="number" placeholder="请输入联系电话" :maxlength="11"/>
      </u-form-item>
      <u-form-item label="身份证号">
        <u-input v-model="form.id_card" type="number" placeholder="请输入身份证号" :maxlength="20"/>
      </u-form-item>
      <u-form-item label="岗 位">
        <u-radio-group v-model="form.jobId" @change="checkJobChange">
          <u-radio v-for="(item, index) in jobList" :key="index" active-color="#42B4AB"
                   :name="item.id">
            {{ item.name }}
          </u-radio>
        </u-radio-group>
      </u-form-item>
      <u-form-item label="学 历">
        <view class="form-select-item hor-layout-center" @click="form.showEdu=true">
          <view class="form-select-text single-line">{{ form.eduObj.label ? form.eduObj.label : '请选择' }}
          </view>
          <u-icon name="arrow-right" color="#000000"></u-icon>
        </view>
        <u-select v-model="form.showEdu" :list="eduList" title="选择学历"
                  :default-value="form.eduObj.value" @confirm="confirmSelectEdu"></u-select>
      </u-form-item>
      <u-form-item label="入职时间">
        <view class="form-select-item hor-layout-center" @click="form.showTime=true">
          <view class="form-select-text">{{ form.entry_time ? form.entry_time : '请选择' }}</view>
          <u-icon name="arrow-right" color="#999999"></u-icon>
          <u-picker v-model="form.showTime" :params="timePara" :default-time="form.entry_time"
                    title="选择入职时间" @confirm="selectTime"></u-picker>
        </view>
      </u-form-item>
      <u-form-item label="状 态">
        <view class="form-select-item hor-layout-center" @click="form.showStatus=true">
          <view class="form-select-text">{{ form.statusObj.label ? form.statusObj.label : '请选择' }}</view>
          <u-icon name="arrow-right" color="#000000"></u-icon>
        </view>
        <u-select v-model="form.showStatus" :list="statusList" title="选择状态"
                  :default-value="form.statusObj.value" @confirm="confirmSelectStatus"></u-select>
      </u-form-item>
      <u-form-item label="家庭住址">
        <u-input v-model="form.address" placeholder="请输入家庭住址" :maxlength="20"/>
      </u-form-item>
    </u-form>
    <view class="submit-view" @click="saveStudentInfo">保存</view>
  </view>
</template>

<script>
import {staffList} from "@/router.js"
import uploadFile from '@/common/ossutil/uploadFile.js'
import {AddStaffApi} from "@/api/staffList.js"

let engine = new AddStaffApi()
export default {
  name: "addStaff",
  data() {
    return {
      timePara: {
        year: true,
        month: true,
        day: true,
        hour: false,
        minute: false,
        second: false
      },
      formLabel: {
        color: "#282828",
        fontSize: '15px',
        textAlign: 'justify',
        textAlignLast: 'justify',
        display: 'inline-block',
        paddingRight: '27px'
      },
      form: {
        image: '',//图片路径
        avatar: '11',
        name: '',
        sex: '',//性别：1男2女0未知
        age: '',
        username: '',
        jobs: [],
        jobId: '',
        edu: '',
        eduObj: {},
        showEdu: false,
        id_card: '',
        entry_time: '',
        status: '',
        statusObj: {},
        showStatus: false,
        address: '',
        showTime: false
      },
      radioList: [{name: "男", value: 1}, {name: "女", value: 2}],
      statusList: [{label: '离职', value: 0}, {label: '在职', value: 1}],
      jobList: [],
      eduList: [],
    }
  },
  onLoad(options) {
    if (options.staffInfo) {
      uni.setNavigationBarTitle({title: "修改员工信息"})
      let staffInfo = JSON.parse(options.staffInfo)
      let {status, entry_time} = staffInfo
      let statusObj = this.statusList.find(s => s.value === status)
      statusObj.value = [statusObj.value]
      entry_time = entry_time ? entry_time : ''
      this.form = {...this.form, ...staffInfo, entry_time, statusObj}
    }
    this.getJobsList()
    this.getEduList()
  },
  methods: {
    getJobsList() {
      engine.getJobsList().then(res => {
        let jobList = res.data
        //将传入的数据进行解析
        jobList.forEach(job => {
          let jobIn = this.form.jobs.find(j => j.id === job.id)
          job.checked = jobIn ? true : false
        })
        this.jobList = jobList
        this.form.jobId = this.form.jobs[0].id
      })
    },
    getEduList() {
      engine.getEduList().then(res => {
        this.eduList = res.data.map(r => {
          return {label: r.name, value: r.id}
        })
        //将传入的数据进行解析
        if (this.form.id) {
          this.form.eduObj = this.eduList.find(e => e.value === this.form.edu)
          this.form.eduObj.value = [this.form.eduObj.value]
        }
      })
    },
    selectTime(e) {
      this.form.entry_time = ''
      let {year, month, day, hour, minute, second} = this.timePara
      if (year) this.form.entry_time += e.year;
      if (month) this.form.entry_time += '-' + e.month;
      if (day) this.form.entry_time += '-' + e.day;
      if (hour) this.form.entry_time += ' ' + e.hour;
      if (minute) this.form.entry_time += ':' + e.minute;
      if (second) this.form.entry_time += ':' + e.second;
    },
    confirmSelectStatus(e) {
      console.log("confirmSelectStatus", e)
      let channelIndex = this.statusList.findIndex(item => item.value === e[0].value)
      this.form.statusObj.value = [channelIndex]
      this.form.statusObj.label = e[0].label
      this.form.status = e[0].value
    },
    confirmSelectEdu(e) {
      console.log("confirmSelectEdu", e)
      let channelIndex = this.eduList.findIndex(item => item.value === e[0].value)
      this.form.eduObj.value = [channelIndex]
      this.form.eduObj.label = e[0].label
      this.form.edu = e[0].value
    },
    checkJobChange(jobId) {
      console.log(jobId)
      this.form.jobs = [{id: jobId}]
    },
    saveStudentInfo() {
      if (this.form.id) {
        engine.updateStaff(this.form).then(res => {
          console.log("saveStudentInfo", res)
          if (res.code === 200) {
            this.$u.toast("修改成功！")
            this.$u.pageCallBackDelay(staffList, 'refreshData')
            this.$u.routeDelay({type: 'navigateBack', delta: 2})
          }
        })
      } else {
        engine.addStaff(this.form).then(res => {
          console.log("saveStudentInfo", res)
          if (res.code === 200) {
            this.$u.toast("添加成功！")
            this.$u.pageCallBackDelay(staffList, 'refreshData')
            this.$u.routeDelay({type: 'back'})
          }
        })
      }
    },
    uploadImage() {
      uni.chooseImage({count: 1}).then(res => {
        let path = res[1].tempFilePaths[0],
            file = res[1].tempFiles[0]
        uploadFile(path, file, (f_name, r_path) => {
          console.log("uploadFile", f_name, r_path)
          this.form.image = r_path
          this.saveImg(f_name)
        }, (err) => {
          this.$u.toast("上传错误！")
          console.error("uploadFile", err)
        })
      })
    },
    saveImg(path) {
      engine.saveResource(path).then(res => {
        this.form.avatar = res.data[0];
      }).catch(err => this.$u.toast(err.message))
    }
  }
}
</script>

<style scoped>
.photo-layout {
  padding-bottom: 25rpx;
  border-bottom: 1px solid #E5E5E5;
}

.photo-view {
  width: 118rpx;
  height: 146rpx;
  background: #D1D1D1;
}

.photo-image {
  width: 100%;
  height: 100%
}

.upload-view {
  margin-left: 50rpx;
  font-size: 30rpx;
  color: #333333;
  font-family: Source Han Sans CN;
}


.submit-view {
  margin: auto;
  margin-top: 15px;
  height: 36px;
  line-height: 36px;
  width: 70%;
  text-align: center;
  background: #42B4AB;
  border-radius: 18px;
  /* 文本样式 */
  font-size: 15px;
  font-weight: bold;
  color: #FFFFFF;
}

.form-select-item {
  width: 100%;
}

.form-select-text {
  flex: 1;
  width: 0;
  margin-right: 3px;
  text-align: right;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #000000;
}

.student-desc-title {
  margin-top: 15px;
  font-size: 15px;
  color: #282828;
}

.student-desc-input {
  min-height: 150px;
  margin-top: 12px;
  background: #EFEFEF;
}
</style>
